<template>
  <div>
    <el-table
        :data="authList"
        style="width: 100%">

<!--      修改-->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form  class="demo-table-expand" label-width="120px" style="font-size: 80%;">
            <el-input v-model="props.row.id" v-show="false"></el-input>
            <el-form-item label="名称" style="width: 450px;">
              <el-input v-model="props.row.name"></el-input>
            </el-form-item>
            <el-form-item label="编码" style="width: 450px;">
              <el-input v-model="props.row.code"></el-input>
            </el-form-item>
            <el-form-item :label="'状态'" required style="width: 450px;">
              <el-radio-group v-model="props.row.status">
                <el-radio :label="0">可用</el-radio>
                <el-radio :label="1">不可用</el-radio>
                <el-radio :label="2">保留权限</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="success" plain @click="saveOrUpdate(props.row)" size="min">{{$t('save')}}</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="ID" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.id" :title="scope.row.id">{{scope.row.id.substring(0,10)}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="250">
      </el-table-column>
      <el-table-column
          prop="code"
          label="编码" width="200">
        <template slot-scope="scope">
          <div style="color: #e87272">{{scope.row.code}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status==0" style="color: #1daa1d">可用</div>
          <div v-else-if="scope.row.status==1" style="color: #ea0e07">不可用</div>
          <div v-else-if="scope.row.status==2" style="color: #c177e8">保留权限</div>
          <div v-else style="color：#bfbfbf;">未知</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间" width="200" >
        <template slot-scope="scope">
          <div style="color: grey">{{scope.row.createTime}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间" width="200">
        <template slot-scope="scope">
          <div style="color: grey">{{scope.row.updateTime}}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('problemMode.operation.index')" width="120" >
        <template slot-scope="scope">
          <div v-if="scope.row.id">
<!--            <el-link v-if="scope.row.type==0"  type="success" @click="update(scope.row)"  size="small" >{{$t('problemMode.case.table.lookData')}}</el-link>-->
            <el-link  style="margin-left: 10px;" type="danger" @click="deleteAuth(scope.row)"  size="small" >{{$t('delete')}}</el-link>
          </div>
          <div v-else>
            <!--            <el-link v-if="scope.row.type==0"  type="success" @click="update(scope.row)"  size="small" >{{$t('problemMode.case.table.lookData')}}</el-link>-->
            <el-link   style="margin-left: 10px;" type="danger"   size="small" >未保存</el-link>
          </div>

          <!-- <el-button @click="update(scope.row)" type="warning" size="small">{{ $t('problemMode.operation.update') }}</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-button type="primary" @click="addAuthUp" style="width:98%;margin-left: 0.5%;margin-top: 10px;" plain> + 添加权限</el-button>
  </div>
</template>

<script>
import * as authApi from '@/api/auth'
import * as userApi from "@/api/admin";
export default {
  name: "authIndex",
  data() {
    return {
      authList:[],
      newData:{
        code:'',
        name:'',
        status:0,

      }
    }
  },
  methods:{
    //保存权限
    saveOrUpdate(data){
      if(data.id){  //更新
        authApi.updateAuth(data).then(res=>{
          if(res.data.success){
            this.$message({type:"success",message:"修改成功"});
            this.getTableData();
          }
        })
      }else{
        authApi.saveAuth(data).then(res=>{
          if(res.data.success){
            this.$message({type:"success",message:"添加成功"});
            this.getTableData();
          }
        })
      }
    },
    deleteAuth(data){ //删除权限
      this.$confirm(this.$t('problemMode.case.deleteWarnBefore')+' '+data.name+this.$t('problemMode.case.deleteWarnAfter'), this.$t('prompt'), {
        confirmButtonText: this.$t('save'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        authApi.deleteAuth({"id":data.id}).then(res=>{
          if(res.data.success){
            this.$message({ type: 'success', message: '删除成功!' });
            this.getTableData();
          }
        })
      })
    },
    getTableData(){
      authApi.getAuthList().then(res=>{
        this.authList = res.data.data;
      })
    },
    addAuthUp(){
      this.authList.push(JSON.parse(JSON.stringify(this.newData)));
    }
  },
  created() {
    this.getTableData();
  }
}
</script>

<style scoped>

</style>